<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .item {
            padding: 1em;
            margin: 30px auto;
            width: 400px;
        }
        .item:first-child {
            border: 1 solid #ccc;
            border-radius: 3px;
        }
        .item:nth-child(2) {
            background: #ffe7e7;
            border-left: 7px solid #f44336;
            border-right: 7px solid #f44336;
        }
        .item:nth-child(3) {
            background: #ffffd7;
            border-top: 7px solid #ffeb3b;
            border-bottom: 7px solid #ffeb3b;
        }
        .item:nth-child(4) {
            background: #e7ffe7;
            border: 1px solid #4CAF50;
            border-bottom: 7px solid #4CAF50;
        }
        .btn {
            padding: 0.8em;
            display: inline-block;
            color: white;
            border-radius: 4px;
            margin-right: 10px;
            cursor: pointer;       
            transition: all .3s; 
        }
        .btn:hover {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }
        .steal {
            background: #009688;
        }
        .yellow{
            background: #ffeb3b;
        }
        .orange {
            background: orange;
        }
        .red {
            background: red;
        }
        .green {
            background: green;
        }
        table { 
            border-collapse: collapse;
            width: 300px; 
            min-height: 25px;
            line-height: 25px; 
            text-align: center; 
            border:1px solid #ccc; 
        } 
        tr {
            border-bottom: 1px solid #ccc;
        }
        .demo1 th {
            background: #4CAF50;
            color: white;                 
        }
        tr:nth-child(even){
            background: #ccc;
        }
        .triangle1 {
            width: 0;
            height: 0;
            border-left: 30px solid red;
            border-right: 30px solid blue;
            border-top: 30px solid yellow;
            border-bottom: 30px solid green; 
        }
        .triangle2 {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 30px solid yellow;
            border-bottom: 30px solid transparent; 
        }
        .triangle3 {
            width: 0;
            height: 0;
            border-left: 30px solid red;
            border-right: 30px solid transparent;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent; 
        }
        .triangle4 {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid blue;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent; 
        }
        .triangle5 {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 30px solid transparent;
            border-bottom: 30px solid green; 
        }
        .triangle6 {
            width: 0;
            height: 0;
            border-left: 30px solid green;
            border-right: 30px solid transparent;
            border-top: 30px solid transparent;
            border-bottom: 30px solid green; 
        }
        .triangle7 {
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid green;
            border-top: 30px solid transparent;
            border-bottom: 30px solid green; 
        }

    </style>
</head>
<body>
     <div class="item">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. In cumque veniam ut odio, quidem natus expedita quis ea, magni perferendis incidunt saepe eveniet doloremque reiciendis, neque enim accusantium officia nihil.
     </div>
     <div class="item">
         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt molestias voluptate veritatis, dignissimos autem animi fuga voluptas corrupti deleniti dicta maiores illum vitae magnam rem incidunt quam perferendis magni eum!
     </div>
     <div class="item">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium vel cupiditate eum eveniet ullam debitis excepturi, ipsum quia itaque voluptates fugiat veritatis unde cum. Illo pariatur distinctio laborum nam.
     </div>
     <div class="item">
         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium vitae itaque aut obcaecati, facere quia dolores eligendi corporis error odio beatae deleniti ipsa consectetur commodi eaque, earum quam quae pariatur!
     </div>
     <div class="item">
         <a class="btn steal">steal</a>
         <a class="btn yellow">yellow</a>
         <a class="btn orange">orange</a>
         <a class="btn red">red</a>
         <a class="btn green">green</a>
     </div>
     <div class="item">
         <table class="demo1">
             <tbody>
                <tr><th>name</th><th>name</th><th>name</th></tr> 
                <tr><td>111</td><td>222</td><td>333</td></tr>
                <tr><td>111</td><td>222</td><td>333</td></tr>
                <tr><td>111</td><td>222</td><td>333</td></tr> 
             </tbody>
         </table>
     </div>
     <div class="item">
          <table class="demo2">
                <tbody>
                    <tr><th>name</th><th>name</th><th>name</th></tr> 
                    <tr><td>111</td><td>222</td><td>333</td></tr>
                    <tr><td>111</td><td>222</td><td>333</td></tr>
                    <tr><td>111</td><td>222</td><td>333</td></tr> 
                </tbody>
          </table>
     </div>
     <div class="item">
         <div class="triangle1"></div>
     </div>
     <div class="item">
         <div class="triangle2"></div>
     </div>
     <div class="item">
         <div class="triangle3"></div>
     </div>
     <div class="item">
         <div class="triangle4"></div>
     </div>
     <div class="item">
         <div class="triangle5"></div>
     </div>
     <div class="item">
         <div class="triangle6"></div>
     </div>
     <div class="item">
         <div class="triangle7"></div>
     </div>
</body>
</html>